<template>
  <div id="app">
    <NoteList />
  </div>
</template>

<template>
  <div class="app-container">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="Cookies" prop="cookies">
        <el-input v-model="formData.cookies" type="textarea" placeholder="请输入Cookies" show-word-limit
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="类型选择" prop="type">
        <el-select v-model="formData.type" placeholder="请选择类型选择" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in field102Options" :key="index" :label="item.label"
                     :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <!-- 当 type 为 01 时显示关键字和请求数量输入框 -->
      <el-form-item v-if="formData.type === '01'" label="关键字" prop="query">
        <el-input v-model="formData.query" placeholder="请输入关键字" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item v-if="formData.type === '01'" label="请求数量" prop="queryNum">
        <el-input v-model="formData.queryNum" placeholder="请输入请求数量" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>

      <!-- 当 type 为 02 时显示用户 URL 和 cursor 输入框 -->
      <el-form-item v-if="formData.type === '02'" label="用户主页链接" prop="userUrl">
        <el-input v-model="formData.userUrl" placeholder="请输入主页链接" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item v-if="formData.type === '02'" label="Cursor" prop="cursor">
        <el-input v-model="formData.cursor" placeholder="请输入cursor" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>

      <!-- 当 type 为 03 时显示用户 URL 和 cursor 输入框 -->
      <el-form-item v-if="formData.type === '03'" label="笔记链接" prop="url">
        <el-input v-model="formData.url" placeholder="请输入笔记链接" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>

      <!-- 按钮 -->
      <el-form-item label="按钮" prop="查询">
        <el-button type="primary" icon="el-icon-search" size="medium" @click="startCollection" :loading="isLoading"> 开始采集</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { fetchByType } from "@/api/xhs/xhs"
import {getData} from "@/api/system/dict/data";

export default {
  name: "xhs",
  components: {},
  props: [],
  data() {
    return {
      // 新增 loading 状态
      isLoading: false,
      formData: {
        type: '01',
        query: '迪士尼',
        queryNum: 1,
        // 设置默认值，对应 field102Options 里某个选项的 value
        // field102: "01",
        cookies: 'abRequestId=50830a6a-a07b-52d9-a019-f04df98aead5; webBuild=4.68.0; a1=19785e8adf8af9w0a81acybcc343jitca9sgjkpug50000168804; webId=8fa9d352d9ed4ca12c9984917b9aaacf; gid=yjWY2dYDD80jyjWY2dY0fjTUiY0ijE80Yy0SM7kvDSSq4k28qV39SV888yKYY848qWDdJf2S; customer-sso-sid=68c517517474618587033295mrlujvjxerstm7gf; x-user-id-ad-market.xiaohongshu.com=5a9c1e0ee8ac2b27d1984898; customerClientId=433507981051036; xsecappid=xhs-pc-web; access-token-ad-market.xiaohongshu.com=customer.ad_market.AT-68c517517481275695695409ablfmqm1auwpgeeg; acw_tc=0a0bb32017503025864983192e12d190d964ed14359ba1fbc5aa25a26095a5; web_session=0400697917ec565c18cef537663a4bd6d12a99; unread={%22ub%22:%2268517618000000002301eb9e%22%2C%22ue%22:%2268521efa000000000303cd81%22%2C%22uc%22:30}; loadts=1750302941816; websectiga=3fff3a6f9f07284b62c0f2ebf91a3b10193175c06e4f71492b60e056edcdebb2; sec_poison_id=4d2ab725-ebc5-4677-a79f-aa24f22ea6d0',
        // 新增字段
        userUrl: 'https://www.xiaohongshu.com/user/profile/57a3eb3a5e87e760e9be1c27?xsec_token=AB28N6wOsTEVgqEI78uwBwQ5BCqBLbx7Qr3mH-TMa6nwk=&xsec_source=pc_feed',
        url: 'https://www.xiaohongshu.com/explore/685386ff000000001203d7f7?xsec_token=ABxswFAVqdKmRgoLSGTylqq2qyGBR5zYi3oxsF3xxmHL8=&xsec_source=pc_feed',
        cursor: ''
      },
      rules: {
        cookies: [{
          required: true,
          message: '请输入Cookies',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请选择类型选择',
          trigger: 'change'
        }],
        query: [{
          required: function() {
            return !this.formData || !this.formData.type || this.formData.type === '01';
          }.bind(this),
          message: '请输入关键字',
          trigger: 'blur'
        }],
        queryNum: [{
          required: function() {
            return !this.formData || !this.formData.type || this.formData.type === '01';
          }.bind(this),
          message: '请输入请求数量',
          trigger: 'blur'
        }],
        userUrl: [{
          required: function() {
            return this.formData && this.formData.type === '02';
          }.bind(this),
          message: '请输入用户URL',
          trigger: 'blur'
        }],
        url: [{
          required: function() {
            return this.formData && this.formData.type === '03';
          }.bind(this),
          message: '请输入笔记链接',
          trigger: 'blur'
        }]
      },
      field102Options: [{
        "label": "关键字采集",
        "value": "01"
      }, {
        "label": "通过用户URL采集笔记",
        "value": "02"
      } , {
        "label": "单一笔记采集",
        "value": "03"
      }],
    }
  },
  computed: {
  },
  watch: {
    'formData.type': {
      immediate: true,
      handler(newVal) {
        if (this.rules && this.rules.query && this.rules.query[0]) {
          this.rules.query[0].required = !newVal || newVal === '01';
        }
        if (this.rules && this.rules.queryNum && this.rules.queryNum[0]) {
          this.rules.queryNum[0].required = !newVal || newVal === '01';
        }
        if (this.rules && this.rules.userUrl && this.rules.userUrl[0]) {
          this.rules.userUrl[0].required = newVal === '02';
        }
        if (this.rules && this.rules.cursor && this.rules.cursor[0]) {
          this.rules.cursor[0].required = newVal === '02';
        }
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    // 新增开始采集方法
    async startCollection() {
      // 请求开始，设置 loading 为 true
      this.isLoading = true
      this.$refs['elForm'].validate(valid => {
        if (!valid) return;
        // 假设后端接口地址为 /api/start-collection
        fetchByType(this.formData).then(response => {
          this.form = response.data
          this.open = true
          this.title = "采集数据"
        }).catch(error => {
            // 处理错误响应
            this.$message.error('采集开始失败，请稍后重试');
            console.error('采集开始失败:', error);
          }).finally(() => {
          // 请求结束，无论成功或失败，设置 loading 为 false
          this.isLoading = false
        });
      });
    }
  }
}

</script>
<style>
</style>
